<template>
  <el-dialog
    :title="headTitle"
    :visible.sync="dialogVisible"
    width="400px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog">
      <div class="dialog-list">
        <label require="true">标签名:</label>
        <div class="span">
          <el-input size="small" v-model="formData.name"></el-input>
        </div>
      </div>
      <div class="dialog-list">
        <label>分类:</label>
        <div class="span">
          <el-select size="small" v-model="formData.infos" placeholder="请选择">
            <el-option
              v-for="item in treeData"
              :key="item.id"
              :label="item.name"
              :value="JSON.stringify(item)"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="dialog-list">
        <label>启用:</label>
        <div class="span">
          <el-switch
            size="small"
            v-model="formData.status"
            active-color="#13ce66"
            inactive-color="#ccc"
            active-value="0"
            inactive-value="1"
          >
          </el-switch>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">提交</el-button>
      <el-button @click="(dialogVisible = false), updateKey()">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import Qs from "qs";
export default {
  props: {
    headTitle: {},
    treeData: {}
  },
  data() {
    return {
      dialogVisible: false,
      dateRange: "",
      formData: {
        name: "",
        code: "",
        status: '0',
        infos:'',
      },
      value: "",
      pData: {}
    };
  },
  methods: {
    save() {
      if(!this.formData.name||this.formData.name===''){
        this.$message.error('标签名不能为空');
        return
      }
      this[this.pData.type]();
      
    },
    add() {
      request({
        url: "/system/accountTag/add",
        method: "post",
        data: {
          name: this.formData.name,
          // code: this.formData.code,
          status: this.formData.status,
          parentId: JSON.parse(this.formData.infos).id,
          type: JSON.parse(this.formData.infos).type,
          category: JSON.parse(this.formData.infos).category,
        }
      }).then(res => {
        this.$emit("reload")
        this.handleClose()
        console.log(res);
      });
    },
    edit(){
      request({
        url: "/system/accountTag/edit",
        method: "post",
        data: {
          id:this.pData.selectData.id,
          name: this.formData.name,
          // code: this.formData.code,
          status: this.formData.status,
          parentId: JSON.parse(this.formData.infos).id,
          type: JSON.parse(this.formData.infos).type,
          category: JSON.parse(this.formData.infos).category,
        }
      }).then(res => {
        this.$emit("reload")
        this.handleClose()
        console.log(res);
      });
    },
    open(data) {
      console.log(data)
      this.pData = data;
      if(data.type==='edit'){
        const infos=this.treeData.filter(item=>item.id===data.selectData.parentId)[0]
        this.formData.name=data.selectData.name
        // this.formData.code=data.selectData.code
        this.formData.status=data.selectData.status
        this.formData.infos=JSON.stringify({...infos})
      }
      this.dialogVisible = true;
    },
    updateKey() {
      this.$emit("update:keyIndex", new Date().getTime());
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.updateKey();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .dialog {
    width: 100%;

    &-list {
      width: 100%;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;

      label {
        width: 80px;
        text-align: right;
        padding: 0 10px;
      }

      label[require="true"]::before {
        content: "*";
        color: red;
      }

      .span {
        width: calc(100% - 80px);
        height: 100%;
        display: flex;
        align-items: center;

        .el-select,
        .el-date-editor {
          width: 100% !important;
        }
      }
    }
  }
}
</style>
